import * as echarts from '../../ec-canvas/echarts';
const util = require('../../utils/util.js')
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置

const app = getApp();

const today = [0, 0, 0, 0, 0, 0, 0];

function initChart_day(canvas, width, height) {
  var seven = app.globalData.today1;      //最近七天

  const chart = echarts.init(canvas, null, {
    width: 380,
    height: 550
  });
  canvas.setChart(chart);

  var that = this

  var option = {
    color: ["#ffd948"],
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: days(),
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: seven
    }]
  };

  chart.setOption(option);
  return chart;
}


function initChart_week(canvas, width, height) {

  var week = app.globalData.today2;       //五周
  const chart = echarts.init(canvas, null, {
    width: 380,
    height: 550
  });
  canvas.setChart(chart);

  var that = this

  var option = {
    color: ["#ffd948"],
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['四周前','三周前','两周前','上周','本周'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: week
    }]
  };

  chart.setOption(option);
  return chart;
}

function initChart_month(canvas, width, height) {
  var month = app.globalData.today3;            //最近五个月
  const chart = echarts.init(canvas, null, {
    width: 380,
    height: 550
  });
  canvas.setChart(chart);

  var that = this

  var option = {
    color: ["#ffd948"],
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data:['四个月前','三个月前','两个月前','上个月','本月'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: month
    }]
  };

  chart.setOption(option);
  return chart;
}



function days() {     //生成最近7天的x轴坐标
  var sixdays = new Array(7)
  for (var i = 1; i < 7; i++) {

    var date = new Date();
    var date1 = new Date(date.getTime() - i * 24 * 60 * 60 * 1000);
    var seperator1 = "-";

    var month = date1.getMonth() + 1;
    var strDate = date1.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    sixdays[i] = month + seperator1 + strDate;

  }
  sixdays[0] = "今天"
  // console.log(sixdays.reverse())        //倒序输出
  return sixdays.reverse()
}



Page({
  data: {
    tabs: ["最近七天", "最近五周", "最近五月"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    day: {
      onInit: initChart_day
    },
    week:{
      onInit: initChart_week
    },
    month: {
      onInit: initChart_month
    }
  },

  onLoad: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
    wx.showLoading({
      title: '统计中',
    })
    wx.hideLoading()
  },

  tabClick: function(e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  }


});